<template>
  <div class="category-debug">
    <h2>分类数据调试信息</h2>
    <div class="debug-section">
      <h3>完整分类数据:</h3>
      <pre>{{ JSON.stringify(categories, null, 2) }}</pre>
    </div>
    <div class="debug-section">
      <h3>一级分类数据:</h3>
      <pre>{{ JSON.stringify(firstLevelCategories, null, 2) }}</pre>
    </div>
    <div class="debug-section" v-for="cat in firstLevelCategories" :key="cat.id">
      <h3>分类{{ cat.id }}的详细信息:</h3>
      <pre>{{ JSON.stringify(cat, null, 2) }}</pre>
      <p>name字段是否存在: {{ 'name' in cat }}</p>
      <p>name字段类型: {{ typeof cat.name }}</p>
      <p>name字段值: {{ cat.name }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getCategoriesList } from '../services/categories';

// 分类数据
const categories = ref([]);

// 计算属性，过滤一级分类
const firstLevelCategories = computed(() => {
  return categories.value.filter(item => item.parentId === 0);
});

// 备用模拟数据，按照用户描述的字段规则创建
const getMockCategories = () => {
  return [
    // 一级分类 (parentId = 0)
    { id: 1, name: '电子产品', parentId: 0, sort: null },
    { id: 2, name: '家居用品', parentId: 0, sort: null },
    { id: 3, name: '时尚服饰', parentId: 0, sort: null },
    
    // 二级分类 (parentId = 1, sort字段关联一级分类ID)
    { id: 4, name: '手机', parentId: 1, sort: 1 },
    { id: 5, name: '电脑', parentId: 1, sort: 1 },
    { id: 6, name: '家电', parentId: 1, sort: 1 },
    { id: 7, name: '厨房用品', parentId: 1, sort: 2 },
    { id: 8, name: '家具', parentId: 1, sort: 2 },
    { id: 9, name: '男装', parentId: 1, sort: 3 },
    { id: 10, name: '女装', parentId: 1, sort: 3 },
    
    // 三级分类
    { id: 11, name: '智能手机', parentId: 4, sort: null },
    { id: 12, name: '功能手机', parentId: 4, sort: null },
    { id: 13, name: '手机配件', parentId: 4, sort: null },
    { id: 14, name: '笔记本电脑', parentId: 5, sort: null },
    { id: 15, name: '台式机', parentId: 5, sort: null },
    { id: 16, name: '平板电脑', parentId: 5, sort: null },
    { id: 17, name: '电视', parentId: 6, sort: null },
    { id: 18, name: '冰箱', parentId: 6, sort: null },
    { id: 19, name: '洗衣机', parentId: 6, sort: null },
    { id: 20, name: '厨具', parentId: 7, sort: null },
    { id: 21, name: '餐具', parentId: 7, sort: null },
    { id: 22, name: '小家电', parentId: 7, sort: null },
    { id: 23, name: '沙发', parentId: 8, sort: null },
    { id: 24, name: '床', parentId: 8, sort: null },
    { id: 25, name: '桌椅', parentId: 8, sort: null },
    { id: 26, name: '上衣', parentId: 9, sort: null },
    { id: 27, name: '裤子', parentId: 9, sort: null },
    { id: 28, name: '外套', parentId: 9, sort: null },
    { id: 29, name: '连衣裙', parentId: 10, sort: null },
    { id: 30, name: '上衣', parentId: 10, sort: null },
    { id: 31, name: '裤装', parentId: 10, sort: null }
  ];
};

// 从后端获取分类数据
const fetchCategories = async () => {
  try {
    console.log('正在从后端API获取分类数据...');
    
    // 检查用户登录状态
    const token = localStorage.getItem('token');
    if (!token) {
      console.warn('用户未登录，分类接口需要认证，直接使用模拟数据');
      const mockData = getMockCategories();
      // 直接设置模拟数据
      categories.value = mockData;
      console.log('模拟数据加载成功，共' + mockData.length + '条记录');
      return;
    }
    
    // 调用真实的后端API
    const response = await getCategoriesList();
    
    // 确保数据格式正确
    let data = response;
    if (response && response.data) {
      data = response.data;
    }
    
    categories.value = data;
    console.log('API数据加载成功，共' + data.length + '条记录');
    
    // 检查数据是否为空
    if (data.length === 0) {
      console.warn('后端返回的分类数据为空，使用模拟数据');
      const mockData = getMockCategories();
      categories.value = mockData;
    }
    
  } catch (error) {
    console.error('加载分类数据时发生错误:' + error);
    
    // 如果API调用失败，使用模拟数据作为备用
    const mockData = getMockCategories();
    categories.value = mockData;
    console.log('使用模拟数据显示分类...');
  }
};

// 组件挂载时执行
onMounted(() => {
  fetchCategories();
});
</script>

<style scoped>
.category-debug {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.category-debug h2 {
  margin-top: 0;
  color: #333;
}

.category-debug h3 {
  color: #555;
  margin-top: 20px;
}

.debug-section {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.category-debug pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.4;
}

.category-debug p {
  margin: 5px 0;
  font-size: 14px;
}
</style>